<KoenigCard
    @icon="koenig/card-indicator-html"
    @class={{concat (kg-style "container-card") " mih10 miw-100 relative"}}
    @headerOffset={{this.headerOffset}}
    @toolbar={{this.toolbar}}
    @payload={{this.payload}}
    @isSelected={{this.isSelected}}
    @isEditing={{this.isEditing}}
    @selectCard={{action this.selectCard}}
    @deselectCard={{action this.deselectCard}}
    @editCard={{action this.editCard}}
    @saveCard={{action this.saveCard}}
    @saveAsSnippet={{this.saveAsSnippet}}
    @onLeaveEdit={{action "leaveEditMode"}}
    @editor={{this.editor}}
>
    {{#if this.isEditing}}
        <GhCmEditor @value={{this.payload.html}}
            @class="koenig-card-html--editor"
            @autofocus={{true}}
            @lineWrapping={{true}}
            @update={{action "updateHtml"}}
        />
    {{else}}
        <div class="koenig-card-html-rendered">{{{sanitize-html this.payload.html}}}</div>
        <div class="koenig-card-click-overlay"></div>
    {{/if}}
</KoenigCard>